﻿@model IEnumerable<FlowerShop.Core.Models.EmployeePerformance>
@{
    ViewBag.Title = "员工业绩";
}

<h2>员工业绩</h2>

<table class="table">
    <thead>
        <tr>
            <th>员工姓名</th>
            <th>订单数</th>
            <th>总利润</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var performance in Model)
        {
            <tr>
                <td>@performance.EmployeeName</td>
                <td>@performance.OrderCount</td>
                <td>@performance.TotalProfit</td>
            </tr>
        }
    </tbody>
</table>

<div>
    <canvas id="performanceChart" width="400" height="200"></canvas>
</div>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/chart.js@latest"></script>
    <script>
        var ctx = document.getElementById('performanceChart').getContext('2d');
        var labels = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(p => p.EmployeeName)));
        var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(p => p.TotalProfit)));

        var chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: '总利润',
                    data: data,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
}